<!--
* @author wn
* @date 2022/10/11 10:51:12
* @description: 头部组件
!-->
<template>
	<div class="app-header">
		<div class="left">
			<el-button size="small" plain @click="setCollapse">
				<el-icon :size="22" color="#333"><i-ep-Menu /></el-icon>
			</el-button>
			<el-breadcrumb :separator-icon="ArrowRight">
				<el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
				<el-breadcrumb-item v-if="bread" :to="bread.path">
					{{ bread.label }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- Dropdown 下拉菜单 -->
		<el-dropdown>
			<span class="el-dropdown-link">
				<img :src="getImgSrc('user')" alt="" />
				<el-icon class="el-icon--right" :size="22">
					<i-ep-arrow-down />
				</el-icon>
			</span>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item>个人中心</el-dropdown-item>
					<el-dropdown-item @click="handleClick">
						退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出
					</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>
<script setup>
import emitter from '@/utils/mitt'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { resetRouter } from '@/router'

// 动态 静态资源引用
// 1 vite
// const getImgSrc = user =>
// 	new URL(`@/assets/images/${user}.jpg`, import.meta.url).href
// 2 webpack
const getImgSrc = user => require(`@/assets/images/${user}.jpg`)

// 点击是否 折叠菜单 1 vuex 2 emitter
/* // 更改 vuex isCollapse
       const store = useStore()
       const setCollapse = () =>
	     store.commit('common/setCollapse') */

let isCollapse = false
const setCollapse = () => {
	isCollapse = !isCollapse
	emitter.emit('setCollapse', isCollapse)
}

// 接收 menu 点击  修改面包屑
const store = useStore()
const bread = computed(() => store.state.common.breadcrumb)

// 退出按钮  清空vuex menuList  跳转首页
const router = useRouter()
const handleClick = () => {
	// 清空 数据 放在 路由守卫 登陆页
	// 清空 动态路由 登录页 按钮中
	store.commit('common/clearMenuList')
	store.commit('user/clearUser')
	// 清空 动态路由 确认按钮中  否则地址栏输入 没确认 也会清空数据
	resetRouter()
	router.replace('/')
}
</script>
<style scoped lang="scss">
.app-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	.left {
		display: flex;
		align-items: center;
		.el-button {
			border: none;
		}
		// 面包屑 样式
		.el-breadcrumb {
			margin-left: 20px;
			/* 不被选中时的颜色 */
			:deep(.el-breadcrumb__inner) {
				color: #d9bb95;
				&:hover {
					color: #409eff;
				}
			}
			:deep(i) {
				color: #fff;
			}
			/* 被选中时的颜色 */
			.el-breadcrumb__item:last-child :deep(.el-breadcrumb__inner) {
				color: #ffd04b;
				font-weight: 800;
			}
		}
	}
	.el-dropdown-link {
		display: flex;
		align-items: center;
		cursor: pointer;
		color: var(--el-color-primary);
		> img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 2px;
		}
	}
}
</style>
